{% extends "base.html" %}
{% block content %}
<div class="jumbotron">
    <div class="container">
    {% if mobileDevice == False %}
        <h1>Tony's Toy Car</h1>
        <p>Click the Buttons to Control the Toy Car</p>
    {% else %}
    	<h2 class="myTextAlign">Tony's Toy Car</h2>
    {% endif %}
    </div>
</div>
<div class="container">
    <table>
        <tr>
            <th></th>
            <th>            
                <form action="/robot/" method="get">
                    <input type="text" value="w" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="Forward">
                </form>
            </th>
            <th></th>
        </tr>
        <tr>
            <th>            
                <form action="/robot/" method="get">
                    <input type="text" value="a" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="turn left">
                </form>
            </th>
            <th>
            </th>
            <th>
                <form action="/robot/" method="get">
                    <input type="text" value="d" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="turn right">
                </form>
            </th>
        </tr>
        <tr>
            <th></th>
            <th>
                <form action="/robot/" method="get">
                    <input type="text" value="s" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="Back">
                </form>
                </th>
            <th></th>
        </tr>
        <tr>
            <th>
                <form action="/robot/" method="get">
                    <input type="text" value="p" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="Stop">
                </form>
            </th>
            <th>

            </th>
            <th>
                <form action="/robot/" method="get">
                    <input type="text" value="o" hidden="true" name="ctrl">
                    <input class="btn btn-lg btn-primary btn-block" type="submit" value="oooooo">
                </form>
            </th>
        </tr>
    </table>
</div>
</br></br>
<footer>
    <div class="container">
        <p>&copy; Tony's Toy Car {% now 'Y' %}</p>
    </div>
</footer>

{% endblock %}